<template>
  <el-table-column
    :type="col.type"
    :show-overflow-tooltip="true"
    :sortable="col.sortable"
    :fixed="col.fixed ? col.fixed : false"
    :prop="col.prop"
    :label="col.label"
    :align="col.align ? col.align : 'center'"
    :width="col.width"
    :min-width="col.widths"
    :filters="col.filters"
    :filter-method="col.filterTag"
    :reserve-selection="col.reserveSelection"
    :render-header="col.renderHeader"
    :selectable="col.selectable"
  >
    <template v-if="col.children && col.children.length > 0">
      <template v-for="(item, index) in col.children">
        <template v-if="item.type !== 'slot'">
          <column :key="item.key ? item.key : index" :col="item">
            <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
              <!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
              <slot :name="slot" v-bind="scope" />
            </template>
          </column>
        </template>
        <!-- solt 自定义列-->
        <template v-else-if="item.type === 'slot'">
          <el-table-column
            :key="item.key ? item.key : index"
            :sortable="item.sortable"
            :width="item.width"
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed ? item.fixed : false"
            :align="item.align ? item.align : 'center'"
            :render-header="item.renderHeader"
            :filters="item.filters"
            :filter-method="item.filterTag"
            filter-placement="bottom-end"
            :reserve-selection="item.reserveSelection"
            :type="item.colType"
          >
            <template slot-scope="scope">
              <slot :name="item.slotType" :row="scope.row" :index="scope.$index" />
            </template>
          </el-table-column>
        </template>
      </template>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: 'Column',
  props: {
    // eslint-disable-next-line vue/require-default-prop
    col: {
      type: Object
    }
  }
}
</script>
<style scoped>
</style>
<style lang="css">
.el-tooltip__popper {
  max-width: 50%;
  line-height: 20px;
}
</style>
